<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--以下两个是使用layui必须引入的文件-->
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <script src="/layui/layui.js"></script>
</head>

<body>
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" name="userName" placeholder="请输入用户名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户类型</label>
            <div class="layui-input-inline">
                <select name="userType" lay-filter="aihao">
                    <option value="0">请选择</option>
                    <option value="1">系统管理员</option>
                    <option value="2">挂号员</option>
                    <option value="3">门诊医师</option>
                    <option value="4">收银员</option>
                    <option value="5">药房医师</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="user">查询</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <!-- <button type="button" class="layui-btn layui-btn-normal" title="添加用户" onclick="add()">
        <i class="layui-icon">&#xe608;</i>
    </button> -->
    <table id="demo" lay-filter="test"></table>
</body>

<!--添加用户的表单-->
<form id="add" class="layui-form" style="display: none;">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-inline">
            <input type="text" name="userName" placeholder="请输入用户名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户类型</label>
        <div class="layui-input-inline">
            <select name="userType" lay-filter="ut">
                <option value="0">请选择</option>
                <option value="1">系统管理员</option>
                <option value="2">挂号员</option>
                <option value="3">门诊医师</option>
                <option value="4">收银员</option>
                <option value="5">药房医师</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选择科室</label>
        <div class="layui-input-inline">
            <select id="keshi" name="departmentId" lay-filter="keshi" disabled>
                <option value="0">请选择</option>
            </select>
        </div>
    </div>
    <!-- <div class="layui-form-item">
        <label class="layui-form-label">用户头像</label>
        <div class="layui-input-inline">
            <button type="button" class="layui-btn" id="face">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
        </div>
    </div> -->
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addUser">确定</button>
            <button type="reset" id="addrest" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<!--编辑用户的表单-->
<form id="edit" class="layui-form" style="display: none;" lay-filter="editForm">
    <input type="hidden" name="id" />
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-inline">
            <input type="text" name="userName" placeholder="请输入用户名" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户类型</label>
        <div class="layui-input-inline">
            <select name="userType" lay-filter="et">
                <option value="0">请选择</option>
                <option value="1">系统管理员</option>
                <option value="2">挂号员</option>
                <option value="3">门诊医师</option>
                <option value="4">收银员</option>
                <option value="5">药房医师</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选择科室</label>
        <div class="layui-input-inline">
            <select id="keshiEdit" name="departmentId" lay-filter="keshi" disabled>
                <option value="0">请选择</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户头像</label>
        <div class="layui-input-inline">
            <button type="button" class="layui-btn" id="face">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="editUser">确定</button>
            <button type="reset" id="addrest" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

</html>
<script>
    layui.use(['table', 'form', 'dropdown', 'jquery'], function () {
        //引入模块
        var $ = layui.jquery;
        var table = layui.table;
        var form = layui.form;
        var dropdown = layui.dropdown;
        //渲染表格
        table.render({
            elem: '#demo',//绑定表格
            url: 'http://localhost:8080/users/findAll.do',//数据接口
            method: 'get',//请求类型
            height: 500,//高度
            page: true,
            limits: [10, 15, 20, 25, 30],
            limit: 20,
            toolbar: '#toolbarDemo',
            cols: [[
                { type: 'checkbox', fixed: 'left' },
                { field: 'id', title: 'ID', width: '5%', sort: true },
                { field: 'dname', title: '部门', width: '8%' },
                {
                    field: '', title: '用户类型', width: '10%', templet: function (d) {
                        if (d.userType == 1) {
                            return '系统管理员'
                        } else if (d.userType == 2) {
                            return '挂号员'
                        }
                        else if (d.userType == 3) {
                            return '门诊医师'
                        }
                        else if (d.userType == 4) {
                            return '收银员'
                        }
                        else if (d.userType == 5) {
                            return '药方医师'
                        }
                        else {
                            return '出错了'
                        }
                    }
                },
                { field: 'account', title: '账号', width: '6%' },
                { field: 'userName', title: '用户名', width: '10%' },
                { field: 'createdTime', title: '创建时间', width: '14%' },
                { field: 'updatedTime', title: '更新时间', width: '14%' },
                { field: 'createdUserId', title: '创建人', width: '8%' },
                { field: 'status', title: '状态', width: '9%', templet: '#switchTpl' },
                { title: '操作', fixed: 'right', width: '16%', align: 'center', toolbar: '#barDemo' }
            ]],
            response: {
                statusCode: 200
            }
        });

        //监听性别操作
        form.on('switch(sexDemo)', function (obj) {
            //layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
            $.post(
                'http://localhost:8080/users/changeStatus.do',//请求数据接口
                {
                    id: this.value
                },
                function (res) {
                    layer.msg(res.msg)
                }
            );
        });


        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    //layer.alert(JSON.stringify(data));
                    //console.log(date)
                    var ids = "";
                    $(data).each(function (index, item) {
                        //console.log(item.id)
                        ids += item.id + ",";

                    })
                    console.log(ids)
                    $.get(
                        'http://localhost:8080/users/delBatch.do',//请求数据接口
                        {
                            ids: ids
                        }, function (res) {

                            if (res.code == 200) {
                                layer.msg('删除成功！');
                            } else {
                                layer.msg('删除失败！');
                            }
                            //重载表格
                            table.reload('demo');
                        }, 'json'

                    );
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    //弹出编辑窗口
                    layer.open({
                        type: 1,
                        title: '编辑用户',
                        area: ['500px', '600px'],
                        content: $('#add') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                    });
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });


        //监听表格工具条事件
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            console.log(data)

            if (layEvent === 'detail') { //查看
                //do somehing
                console.log('你点的是查看')
            } else if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                    //console.log('你点的是删除')
                    $.get(
                        'http://localhost:8080/users/del.do',//请求数据接口
                        {
                            id: data.id
                        }, function (res) {
                            layer.close(layer.index);//关闭最新弹出层
                            console.log(res.code)
                            if (res.code == 200) {
                                layer.msg('删除成功！');
                            } else {
                                layer.msg('删除失败！');
                            }
                            //重载表格
                            table.reload('demo');
                        }, 'json'

                    );

                });
            } else if (layEvent === 'edit') { //编辑
                //do something
                //console.log('你点的是编辑')

                //禁用科室下拉框
                $("#keshiEdit").attr('disabled', true);

                //加载科室
                $.get(
                    'http://localhost:8080/department/findAll.do',//请求数据接口
                    function (res) {//请求成功后回调函数
                        //console.log(res)
                        $(res.data).each(function (index, item) {
                            //console.log(item)
                            var option = '<option value="' + item.id + '">' + item.name + '</option>';
                            var keshi = $('#keshiEdit');
                            keshi.append(option);//追加一个下拉选项
                        })
                        form.render('select');//重新渲染下拉框
                        //表单回显数据
                        form.val('editForm', data);

                    }, 'json'
                );

                if (data.userType == 3) {
                    //如果用户是门诊医师，解除科室禁用
                    $("#keshiEdit").attr('disabled', false);
                }
                //加载前清空数据
                $("#keshiEdit").html('<option value="0">请选择</option>');
                form.render('select');//重新渲染下拉框
                //弹出编辑窗口
                layer.open({
                    type: 1,
                    title: '编辑用户',
                    area: ['500px', '600px'],
                    content: $('#edit') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                });





                //同步更新缓存对应的值
                // obj.update({
                //     username: '123'
                //     , title: 'xxx'
                // });
            } else if (layEvent === 'LAYTABLE_TIPS') {
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
            }
        });


        //监听编辑表单提交事件
        form.on('submit(editUser)', function (data) {

            //console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            //console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            //添加用户
            $.post(
                'http://localhost:8080/users/edit.do',//后台请求接口
                data.field,//请求数据
                function (res) {
                    layer.close(layer.index);//关闭最新弹出层
                    console.log(res.code)
                    if (res.code == 200) {
                        layer.msg('修改成功！');
                    } else {
                        layer.msg('修改失败！');
                    }
                    //重载表格
                    table.reload('demo');
                }, 'json'
            );

            return false;
        });

        //监听编辑表单下拉框选择事件，如果选择门诊医师，启用科室选择
        form.on('select(et)', function (data) {
            console.log(data.value)
            if (data.value == 3) {
                $("#keshiEdit").attr('disabled', false);//启用

            } else {
                console.log()
                //不是门诊医师时科室恢复为请选择
                $($("#keshiEdit").find('option')[0]).prop('selected', true);
                $("#keshiEdit").attr('disabled', true);//禁用
            }
            form.render('select');//重新渲染下拉框


        });

        //加载下拉框
        // dropdown.render({
        //     elem: '#type',

        // });

        //监听查询表单提交事件
        form.on('submit(user)', function (data) {//user是表单里提交按钮的lay-filter的值
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}

            //重载表格
            table.reload('demo', {
                //url: '/api/table/search',   不需要更换数据接口时不写url，沿用表格渲染时的url
                where: data.field //设定异步数据接口的额外参数
                //,height: 300
            });

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    })

    //点击添加按钮，打开弹出层
    function add() {
        layui.use(['jquery', 'form', 'upload'], function () {
            var $ = layui.jquery;//引入jquery模块
            var form = layui.form;
            var upload = layui.upload;//引入文件上传模块

            //清空表单数据
            $("#addrest").click();
            layer.open({
                type: 1,
                title: '添加用户',
                area: ['500px', '600px'],
                content: $('#add') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
            });


            //监听添加表单下拉框选择事件，如果选择门诊医师，动态渲染科室下拉框
            form.on('select(ut)', function (data) {
                console.log(data.elem); //得到select原始DOM对象
                console.log(data.value); //得到被选中的值
                console.log(data.othis); //得到美化后的DOM对象

                if (data.value == 3) {
                    //加载科室
                    $.get(
                        'http://localhost:8080/department/findAll.do',//请求数据接口
                        function (res) {//回调函数
                            //console.log(res)
                            $(res.data).each(function (index, item) {
                                //console.log(item)
                                var option = '<option value="' + item.id + '">' + item.name + '</option>';
                                var keshi = $('#keshi');
                                keshi.append(option);//追加一个下拉选项
                            })
                            $("#keshi").attr('disabled', false);//启用
                            form.render('select');//重新渲染下拉框
                        }, 'json'
                    );
                } else {
                    $("#keshi").html('<option value="0">请选择</option>');
                    $("#keshi").attr('disabled', 'disabled');//禁用
                    form.render('select');//重新渲染下拉框
                }
            });



            //监听添加表单提交事件
            form.on('submit(addUser)', function (data) {
                //console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                //console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                //console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                //添加用户
                $.post(
                    'http://localhost:8080/users/add2.do',//后台请求接口
                    data.field,//请求数据
                    function (res) {
                        layer.close(layer.index);//关闭最新弹出层
                        console.log(res.code)
                        if (res.code == 200) {
                            layer.msg('添加成功！');
                        } else {
                            layer.msg('添加失败！');
                        }

                        //重载表格
                        table.reload('demo');

                        //layer.closeAll();//疯狂模式
                    }, 'json'
                );

                return false;
            });

            //文件上传
            var uploadInst = upload.render({
                elem: '#face' //绑定元素
                , url: 'http://localhost:8080/users/upload.do' //上传接口
                , done: function (res) {
                    //上传完毕回调
                    console.log(res)
                }
                , error: function (res) {
                    //请求异常回调
                    console.log(res)
                }
            });

        })

    }
</script>
<!--行内工具栏-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  </script>

<!--表格内表单元素-->
<script type="text/html" id="switchTpl">
    <!-- 这里的 checked 的状态只是演示 -->
<input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="sexDemo" {{
    d.status==0 ? 'checked' : '' }}>
</script>
<!--表格头工具栏-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
      <button class="layui-btn layui-btn-sm" lay-event="getCheckData">批量删除</button>
      <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">添加</button>
      <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
  </script>